// 颜色变量
$primary-color: #409eff;
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$info-color: #909399;

// 辅助色
$primary-light-9: #ecf5ff;
$primary-light-8: #d9ecff;
$primary-light-7: #c6e2ff;
$primary-light-6: #b3d8ff;
$primary-light-5: #a0cfff;
$primary-light-4: #8cc5ff;
$primary-light-3: #79bbff;
$primary-light-2: #66b1ff;
$primary-light-1: #53a8ff;

// 中性色
$text-color-primary: #303133;
$text-color-regular: #606266;
$text-color-secondary: #909399;
$text-color-placeholder: #c0c4cc;
$text-color-disabled: #e4e7ed;

$border-color-base: #dcdfe6;
$border-color-light: #e4e7ed;
$border-color-lighter: #ebeef5;
$border-color-extra-light: #f2f6fc;

$background-color-base: #f5f7fa;
$background-color-light: #fafafa;

// 字体大小
$font-size-extra-small: 12px;
$font-size-small: 13px;
$font-size-base: 14px;
$font-size-medium: 16px;
$font-size-large: 18px;
$font-size-extra-large: 20px;

// 字体粗细
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-bold: 600;
$font-weight-bolder: 700;

// 行高
$line-height-base: 1.5;
$line-height-small: 1.2;
$line-height-large: 1.8;

// 间距
$spacing-extra-small: 4px;
$spacing-small: 8px;
$spacing-base: 12px;
$spacing-medium: 16px;
$spacing-large: 20px;
$spacing-extra-large: 24px;

// 圆角
$border-radius-small: 2px;
$border-radius-base: 4px;
$border-radius-medium: 6px;
$border-radius-large: 8px;
$border-radius-round: 50%;

// 边框
$border-width-base: 1px;
$border-style-base: solid;
$border-base: $border-width-base $border-style-base $border-color-base;

// 阴影
$box-shadow-base:
  0 2px 4px rgba(0, 0, 0, 0.12),
  0 0 6px rgba(0, 0, 0, 0.04);
$box-shadow-dark:
  0 2px 4px rgba(0, 0, 0, 0.12),
  0 0 6px rgba(0, 0, 0, 0.12);
$box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

// 层级
$z-index-normal: 1;
$z-index-top: 1000;
$z-index-popper: 2000;

// 响应式断点
$xs: 480px;
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
$xxl: 1600px;

// 容器宽度
$container-sm: 540px;
$container-md: 720px;
$container-lg: 960px;
$container-xl: 1140px;
$container-xxl: 1320px;

// 表单相关
$form-item-margin-bottom: 18px;
$form-label-font-size: $font-size-base;
$form-label-color: $text-color-regular;

// 表格相关
$table-header-bg: #fafafa;
$table-header-text-color: $text-color-primary;
$table-row-hover-bg: #f5f7fa;
$table-border-color: $border-color-lighter;

// 按钮相关
$button-border-radius: $border-radius-base;
$button-font-weight: $font-weight-medium;

// 卡片相关
$card-border-radius: $border-radius-medium;
$card-padding: $spacing-large;
$card-shadow: $box-shadow-base;

// 动画
$transition-base: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
$transition-border: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
$transition-box-shadow: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
$transition-color: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
$transition-opacity: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
